import {Tabs, Button, Form, Input, Select, Row, Col, Space} from 'antd'
import React, {useEffect, useState} from 'react'
import UploadImg from './uploadImg'
import http from '../../../../utils/http'

// 1.编辑基本信息组件
const BasicInformation = ({history, setdefaultActiveKey, isEdit, ...props}) => {

  let [editData, seteditData] = useState({})

  // 编辑状态
  useEffect(() => {
    if (isEdit) {
      let editData1 = JSON.parse(sessionStorage.getItem('editData'))
      seteditData(editData1)
    }
  }, [])

  const FormInformation = () => {

    const [form] = Form.useForm()
    // 提交按钮
    const submit = () => {
      form.validateFields().then(values => {
        console.log(values)
        sessionStorage.setItem('addBasicInformation', JSON.stringify(values))
      }).catch(err => {
        console.log(err)
      })

    }

    // 下一步
    const next = () => {
      setdefaultActiveKey('2')
    }

    // 搜索框
    const Level1classify = ['男装', '女装']
    const Level2classify = {
      '男装': ['上衣', '裤子'],
      '女装': ['裙子', '风衣'],
    }
    const [Level1, setLevel1] = React.useState([])
    const [Level2, setLevel2] = React.useState([])

    const handleProvinceChange = value => {
      setLevel1(Level2classify[value])
      setLevel2(Level2classify[value][0])
    }

    const onLevel2Change = value => {
      setLevel2(value)
    }

    // 编辑状态改变表单里面的值
    useEffect(() => {
      if (isEdit) {
        console.log(editData)
        form.setFieldsValue({
          goodsId: editData.id,
          name: editData.name,
          image_url: editData.image_url,
        })
      }
    }, [])

    return (
      <div className='formInformation'>
        <Form
          labelAlign="center"
          form={form}
          labelCol={{span: 5}}
          wrapperCol={{span: 10}}
        >
          <Form.Item label="商品货号" name='goodsId' style={{margin: '42px 0 20px'}}>
            <Input placeholder="请输入商品货号" disabled={isEdit ? true : false} />
          </Form.Item>
          <Form.Item label="商品名称" name='name'
            rules={
              [{required: true, message: "请输入商品名称"}]
            }>
            <Input placeholder="请输入商品名称" suffix="0/168" />
          </Form.Item>
          <Row>
            <Col span={5} style={{textAlign: 'right'}}><span className='red'>*</span>商品图片：</Col>
            <Space align="baseline">
              <Form.Item name='image_url' valuePropName="fileList1"
                rules={
                  [{required: true, message: "请输入商品图片"}]
                }
                wrapperCol={{span: 24}}
              >
                <UploadImg introduction="商品主图" name="file" modifytype={isEdit ? 1 : ''}></UploadImg>
              </Form.Item>
              <Form.Item name='fileList2' valuePropName="fileList2" wrapperCol={{span: 24}}>
                <UploadImg introduction="商品轮播图" name='file'></UploadImg>
              </Form.Item>
            </Space>
          </Row>

          <Row>
            <Col offset={5} className='prompt'>
              建议尺寸：800*800像素，你可以拖拽调整轮播图位置，最多上传9张
            </Col>
          </Row>

          <Form.Item name='filelist3' label="商品视频" valuePropName="fileList3">
            <UploadImg name='file'></UploadImg>
          </Form.Item>

          <Row>
            <Col offset={5} className='prompt'>
              非必填，仅手机端查看，建议时长9-30秒，建议视频宽高比16:9
            </Col>
          </Row>

          <Row style={{marginTop: '20px'}}>
            <Col span={5} style={{textAlign: 'right'}}><span className='red'>*</span>商品分类：</Col>
            <Space align="baseline">
              <Form.Item
                name="store_Id"
                className="goodsClassify"
                rules={
                  [{required: true, message: "请选择商品类别"}]
                }
                wrapperCol={{span: 24}}
              >
                <Select
                  placeholder="一级分类"
                  onChange={handleProvinceChange}
                  style={{width: "120px"}}
                >
                  {Level1classify.map(v => (
                    <Select.Option key={v}>{v}</Select.Option>
                  ))}
                </Select>
              </Form.Item>

              <Form.Item
                name="goods_classify_id"
                noStyle
              >
                <Select placeholder="二级分类"
                  value={Level2}
                  onChange={onLevel2Change}
                  style={{width: "120px"}}
                >
                  {Level1.map(v => (
                    <Select.Option key={v}>{v}</Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Space>

          </Row>
          <Space size="large" className='opeart'>
            <Button type="primary" onClick={submit}>保存</Button>
            <Button type="default" onClick={next}>下一步</Button>
          </Space>
        </Form>
      </div >
    )
  }
  return (
    <div className='basicInformation'>
      <div className="tit">基础信息</div>
      <FormInformation></FormInformation>
    </div>
  )
}

export default BasicInformation